<template>
    <div class="common-card" :class="themeType">
        <public-title title="基层医疗点远程会诊" :theme-type="themeType" />
        <div class="inner">
            <div class="inner-item" data-text="应急就医-服务中心"></div>
            <div class="inner-item" data-text="采油九厂-薛岔作业区"></div>
            <div class="inner-item" data-text="第九采油厂-五谷城作业区"></div>
            <div class="inner-item" data-text="采油十一厂-彭阳作业区"></div>
        </div>
    </div>
</template>
<script setup lang="ts">
    import PublicTitle from '/@/components/publicTitle.vue';
    import { useTheme } from '/@/hooks/theme/useTheme.ts';

    const { themeType } = useTheme();
</script>
<style scoped lang="less">
    .inner {
        width: 100%;
        height: calc(100% - 40px);
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        align-content: space-around;
        padding-top: 2%;

        .inner-item {
            width: 48%;
            height: 46%;
            position: relative;
        }

        .inner-item:nth-child(1) {
            background: url('../../assets/images/doctors1.png') no-repeat;
            background-size: 100% 100%;
        }

        .inner-item:after {
            position: absolute;
            content: attr(data-text);
            color: #fff;
            bottom: 0;
            left: 0;
            width: 100%;
            text-align: left;
            padding-left: 10px;
            background: linear-gradient(to top, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.1));
        }

        .inner-item:nth-child(2) {
            background: url('../../assets/images/doctors2.png') no-repeat;
            background-size: 100% 100%;
        }

        .inner-item:nth-child(3) {
            background: url('../../assets/images/doctors3.png') no-repeat;
            background-size: 100% 100%;
        }

        .inner-item:nth-child(4) {
            background: url('../../assets/images/doctors4.png') no-repeat;
            background-size: 100% 100%;
        }
    }
</style>
